<template>
  <el-form :model="form"
           label-width="auto"
           style="max-width: 600px">
    <el-form-item label="用ID">
      <el-input v-model="form.uid"
                disabled />
    </el-form-item>

    <el-form-item label="账号">
      <el-input v-model="form.auto"
                disabled />
    </el-form-item>

    <el-form-item label="用户名">
      <el-input v-model="form.username" />
    </el-form-item>

    <el-form-item label="年龄">
      <el-input v-model="form.age" />
    </el-form-item>

    <el-form-item label="密码">
      <el-input v-model="form.password" />
    </el-form-item>

    <el-form-item label="电话">
      <el-input v-model="form.phone" />
    </el-form-item>

    <el-form-item label="性别">
      <el-radio-group v-model="form.sex">
        <el-radio value="1">男</el-radio>
        <el-radio value="0">女</el-radio>
      </el-radio-group>
    </el-form-item>

    <el-form-item label="身份">
      <el-radio-group v-model="form.role">
        <el-radio value="1"
                  disabled>管理员</el-radio>
        <el-radio value="0"
                  disabled>普通用户</el-radio>
      </el-radio-group>
    </el-form-item>

    <el-form-item label="状态">
      <el-radio-group v-model="form.statue">
        <el-radio value="1"
                  disabled>启用</el-radio>
        <el-radio value="0"
                  disabled>禁用</el-radio>
      </el-radio-group>
    </el-form-item>

    <el-form-item>
      <el-button type="primary"
                 @click="onSubmit">提交</el-button>
      <el-button @click="onResetSubmit">取消</el-button>
    </el-form-item>
  </el-form>
</template>


<script setup>
import { ElMessage, ElMessageBox } from 'element-plus'
import { updateUserInfo } from "@/api/index"
import { onMounted, reactive } from 'vue'

// do not use same name with ref
const form = reactive({
  username: '',
  phone: '',
  password: '',
  uid: '',
  role: '',
  statue: '',
  sex: '',
  age: '',
  auto: ""
})

//修改
const onSubmit = () => {
  //请求参数
  let query = {};
  Object.assign(query, form)
  query.role = parseInt(query.role)
  query.sex = parseInt(query.sex)
  query.statue = parseInt(query.statue)
  updateUserInfo(query).then((res) => {
    //修改成功
    if (res.data.code == 200 && res.data.data) {
      localStorage.setItem("user", JSON.stringify(query))
    }
    ElMessage({
      message: res.data.msg,
      type: 'success',
    })
  }).catch((err) => {
    console.log(err)
  })
}

//重置 或 初始化
const onResetSubmit = () => {
  let userInfo = localStorage.getItem("user")
  if (userInfo && userInfo != '') {
    let user = JSON.parse(userInfo)
    form.username = user.username
    form.age = user.age
    form.phone = user.phone
    form.password = user.password
    form.role = user.role + ''
    form.statue = user.statue + ''
    form.sex = user.sex + ''
    form.uid = user.uid
    form.auto = user.auto
  }

}

// 组件挂载时
onMounted(() => {
  //初始化
  onResetSubmit();
})
</script>



<style scoped></style>